<template>
  <j-modal
    width="80%"
    :title="title"
    :maskClosable="false"
    switchFullscreen
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
    <template slot="footer">
      <a-button @click="handleCancleDbSync">
        关闭
      </a-button>
      <a-button type="primary" v-if="!disableSubmit" :loading="syncLoading" @click="handleDbSync">确认</a-button>
    </template>
    <vxe-grid
      ref="xTable"
      border
      resizable
      keep-source
      height="300px"
      align="center"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row',activeMethod: activeRowMethod}"
      :columns="tableColumn"
      :data="dataSource"
    >
      <template v-slot:toolbar_buttons>
        <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="selectionRows.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template v-slot:action="{ row }">
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </vxe-grid>
  </j-modal>
</template>
<script>
import { postAction } from '@/api/manage'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'AssessmentTaskModal',
  components: {
    JSelectMultiUser
  },
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      title: '考核评分',
      syncLoading: false,
      url: {
        completeTask: '/hr/assessment/task/completeTask'
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'indexName', title: '分类' },
        { field: 'indexDesc', title: '考核指标' },
        { field: 'weight', title: '权重' },
        { field: 'score', title: '考核指标', editRender: { name: '$input', props: { type: 'number' }}}
      ],
      validRules: {
        score: [
          { required: true, message: '请填写分值' },
          { min: 0, max: 100, type: 'number', message: '请填写0-100之间的数字' }
        ]
      },
      dataSource: [],
      formData: {}
    }
  },
  methods: {
    handleCancleDbSync() {
      this.disableSubmit = false
      this.editModalVisible = false
    },
    add() {
      this.formData = { }
      this.editModalVisible = true
    },
    edit(data) {
      this.title = '考核评分'
      this.formData = JSON.parse(JSON.stringify(data))
      this.dataSource = JSON.parse(JSON.stringify(data.results))
      this.editModalVisible = true
    },
    async handleDbSync() {
      const errMap = await this.$refs.xTable.validate(true).catch(errMap => errMap)
      console.log(errMap)
      if (!errMap) {
        this.updateData()
      }
    },
    updateData() {
      this.syncLoading = true
      const { fullData } = this.$refs.xTable.getTableData()
      this.formData.results = fullData
      postAction(this.url.completeTask, this.formData).then(res => {
        this.actionSuccess(res)
      })
    },
    actionSuccess(res) {
      this.syncLoading = false
      if (res.success) {
        this.$emit('ok')
        this.editModalVisible = false
      } else {
        this.$message.warning(res.message)
      }
    },
    activeRowMethod() {
      return !this.disableSubmit
    }
  }
}
</script>
<style lang="less">

</style>
